<template>
  <el-container>
    <el-header>
      <el-row justify="space-around">
        <el-button
          size="large"
          color="#04233a"
          v-for="(btn, index) in buttons"
          :key="index"
          @click="handleClick"
          >{{ btn }}</el-button
        >
      </el-row>
    </el-header>
    <el-main>
      <!-- 页面主体内容 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-container direction="vertical">
            <el-container class="container-box">
              法律案例知识平台
            </el-container>
            <el-container class="container-box">
              <img @click="goToExternalSite('https://www.chinalaw.gov.cn')"  src="https://www.chinalaw.gov.cn/images/topLogo_new_3.png" alt="https://www.chinalaw.gov.cn/images/topLogo_new_3.png" />
            </el-container>
            <el-container class="container-box">
              <div class="div-27">法律多源科普信息</div>
            </el-container>
          </el-container>
        </el-col>
        <el-col :span="12">
          <el-container class="container-box" direction="vertical">
            <div
              class="text-box"
              style="
                color: rgb(255, 255, 255);
                width: 100%;
                background-color: #04233a;
              "
            >
              {{ activebutton }}
            </div>
            <div v-for="(text, index) in labels" :key="index" class="text-box">
              {{ text }}
            </div>
          </el-container>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { ref } from 'vue'
import { ElContainer, ElHeader, ElMain, ElRow, ElButton } from 'element-plus'
export default {
  name: 'MainpageIndex',
  components: {
    ElContainer,
    ElHeader,
    ElMain,
    ElRow,
    ElButton
  },
methods: {
  goToExternalSite(url) {
      window.location.href = url;
    }
},
  setup() {
    const buttons = ref([
      '宪法',
      '行政法',
      '民商法',
      '经济法',
      '社会法',
      '更多'
    ]) // 按钮名称列表
    const activebutton = ref('宪法') //默认选择。
    const labels = ref([
      '【----------------------- 法律案例 1 ----------------------】 2022-11-07 13:22:49',
      '【----------------------- 法律案例 2 ----------------------】 2022-11-07 13:17:32',
      '【----------------------- 法律案例 3 ----------------------】 2022-11-07 13:17:32',
      '【----------------------- 法律案例 4 ----------------------】 2022-11-07 13:17:32',
      '【----------------------- 法律案例 5 ----------------------】 2022-11-07 13:17:32'
    ])
    const handleClick = (event) => {
      //console.log(event.target.innerText)
      activebutton.value = event.target.innerText
    }
    return {
      buttons,
      labels,
      activebutton,
      handleClick
    }
  }
}
</script>

<style scoped>
.el-header {
  padding: 0%;
}
.el-button {
  box-shadow: 0 2px 4px rgba(1, 1, 1, 0.5);
}

.container-box {
  margin: 10px 0;
  border-radius: 24px;
  color: #04233a;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-size: 2em;
  font-weight: 500;
  line-height: 100%;
  align-self: auto;
  max-width: 612px;
  align-items: center;
  border-radius: 24px;
  border: 2px solid #e6e6e6;
  background-color: #fafaf5;
  padding: 1em;
}

.div-27 {
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  background-color: #04233a;
  align-self: left;
  display: flex;
  width: 579px;
  max-width: 85%;
  flex-direction: column;
  color: #e6e6e6;
  font-size: 16px;
}
.text-box {
  background-color: #f1f5f7;
  border: #000000 solid 0.01em;
  margin: 0.1em 0.1em 0.1em 0.1em;
  text-align: center;
  font-size: 16px;
  border-radius: 4px;
}
</style>
